<template>
  <div class="auditinfo_container">
    <!-- top区域-->
    <div class="auditinfo_box">
      <span class="title_style">个人信息</span>
    </div>
    <!-- 登录表单区域 -->
    <el-form
      :label-position="labelPosition"
      label-width="100px"
      :model="formLabelAlign"
      class="login_form"
      id="selectForm"
    >
      <el-form-item>
        <el-button class="text_click" type="text">ID</el-button>
        <span class="text_click">:</span>
        <el-button class="text_click" type="text">1228</el-button>
      </el-form-item>
      <el-form-item label="昵称">
        <el-input
          v-model="formLabelAlign.nickname"
          placeholder="请输入昵称"
        ></el-input>
      </el-form-item>
      <el-form-item label="绑定手机" id="selectItem">
        <el-row>
          <el-col :span="6">
            <el-input
              v-model="formLabelAlign.phonenumber"
              placeholder="请输入手机"
            ></el-input
          ></el-col>
          <el-col :span="2">
            <el-button class="messagebutton_style" @click="phone"
              >修改绑定手机</el-button
            ></el-col
          >
        </el-row>
      </el-form-item>
      <el-form-item label="性别">
        <el-input
          v-model="formLabelAlign.gender"
          placeholder="请输入性别"
        ></el-input>
      </el-form-item>
      <el-form-item label="地区">
        <el-select placeholder="请选择原省份" v-model="formLabelAlign.provinceid">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
        <el-select placeholder="请选择原城市" v-model="formLabelAlign.cityid">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="btns_center">
        <el-button class="confirmbutton_style" @click="submitForm()"
          >确认</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { doChangeinfo, getPersonalinfo } from "crm/myinfo/myinfo.js";
export default {
  data() {
    return {
      labelPosition: "right",
      // formLabelAlign:[],
      formLabelAlign: {
        nickname: "",
        phonenumber: "",
        gender: "",
        provinceid: "",
        cityid: "",
        userid: "",
      },
    };
  },
  created() {
    this.getinfo();
  },
  methods: {
    //修改手机号页面跳转
    phone() {
      this.$router.push("/admin/myinfo/changephone");
    },

    //获取个人信息
    getinfo(){
      let payload = {};
      payload.userid = localStorage.getItem("userid");
      getPersonalinfo(payload)
        .then((res) => {
          if (res.status == "OK") {
            this.formLabelAlign=res;
            console.log("打印个人信息查看！");
            console.log(this.formLabelAlign);
          }
        })
        .catch((err) => {});
    },

    // //修改手机号
    // submitForm() {
    //   const payload = this.formLabelAlign;
    //   payload.userid = localStorage.getItem("userid");
    //   doChangePhone(payload)
    //     .then((res) => {
    //       if (res.data.status == "OK") {
    //         this.$message.success("修改成功");
    //         this.$router.push("admin/login");
    //       } else {
    //         this.$message.error("修改失败");
    //       }
    //     })
    //     .catch((err) => {
    //       EventBus.$emit("closeloading");
    //     });
    // },

    //修改个人信息
    submitForm() {
      let payload = {};
      payload = this.formLabelAlign;
      payload.userid = localStorage.getItem("userid");
      doChangeinfo(payload)
        .then((res) => {
          if (res.data.status !== "OK") {
            alert("修改个人信息失败");
            return;
          } else if (res.data.status == "OK") {
            alert("修改个人信息成功！");
            console.log("打印个人信息修改");
            localStorage.setItem("userid", res.data);
            // localStorage.setItem("token", res.data.token);
            this.$router.push("#");
          }
        })
        .catch((err) => {});
    },
    // onChange() {
    //   this.$confirm("确认修改人员信息?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(() => {
    //       if (this.addF.username !== "") {
    //         this.flag = true;
    //       } else {
    //         this.$message.info("请检查并填写必填项!");
    //       }
    //       if (this.flag == true) {
    //         const payload = this.addF;
    //         payload.uid = localStorage.getItem("uid");
    //         this.$delete(payload, "uplace");
    //         this.$delete(payload, "jihuo");
    //         this.$delete(payload, "grade");
    //         this.$delete(payload, "usernum");
    //         this.$delete(payload, "error_code");
    //         doChangeinfo(payload)
    //           .then((res) => {
    //             if (res.data.error_code == 0) {
    //               this.$message.success("修改成功");
    //               localStorage.setItem("username", this.addF.username);
    //               // this.$router.push("/admin/arch/record");
    //               this.$router.back();
    //             } else {
    //               this.$message.error("修改失败");
    //             }
    //           })
    //           .catch((err) => {
    //             EventBus.$emit("closeloading");
    //           });
    //       }
    //     })
    //     .catch(() => {});
    // },
  },
};
</script>

<style scoped>
.auditinfo_container {
  background-color: #202020;
  width: 100%;
  height: 100%;
  display: flex;
}
.auditinfo_box {
  background-color: #262626;
  width: 100%;
  height: 56px;
  padding: 5px 0;
}
.title_style {
  height: 100%;
  margin: 0%;
  padding: 0 48px;
  border-width: 0px;
  font-family: "Youshebiaotihei";
  color: #6c6c6c;
  font-size: 42px;
}
.text_click {
  font-family: "Youshebiaotihei";
  color: #6c6c6c;
  font-size: 30px;
}
/*.text_note{
  font-family: 'Youshebiaotihei';
  color:#FFFFFF;
  font-size: 15px;
}*/
#selectForm >>> .el-form-item__label {
  font-size: 12px;
  font-family: "Youshebiaotihei";
  color: #eeeeee;
  font-size: 20px;
  position: relative;
}
/deep/input::-webkit-input-placeholder {
  font-family: "Youshebiaotihei";
  color: #747474;
  font-size: 20px;
}
/deep/.el-input__inner {
  background-color: #2a2a2a;
  border: 0;
  width: 60%;
  position: relative;
}
#selectItem >>> .el-input__inner {
  background-color: #2a2a2a;
  border: 0;
  width: 77%;
  position: relative;
}
.el-col-6 {
  width: 78%;
}
.messagebutton_style {
  height: 50px;
  width: 160px;
  margin: 0%;
  border-width: 0px;
  padding: 0%;
  font-family: "Youshebiaotihei";
  color: #eeeeee;
  background-color: #aeaeae;
  font-size: 26px;
}
.confirmbutton_style {
  height: 50px;
  width: 100px;
  margin: 0%;
  border-width: 0px;
  padding: 0%;
  font-family: "Youshebiaotihei";
  color: #fdfdfd;
  background-color: #d67025;
  font-size: 35px;
}
.btns_center {
  display: flex;
  justify-content: center;
}
.login_form {
  position: absolute;
  bottom: 20%;
  width: 70%;
  padding: 0 50px;
  box-sizing: border-box; /* 巧妙 */
}
</style>